<template>
  <div class="videowrap">
    <el-dialog
      v-model="dialogVisible"
      :title="titleGet"
      width="570px"
      custom-class="diyclass"
    >
      <div id="video-container" class="videocontent"></div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  toRefs,
  computed,
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from "vue";
import { ElMessage } from "element-plus";
import EZUIKit from "ezuikit-js";
import {
  previewThemeData,
  reviewThemeData,
} from "../../components/_util/video.config";
export default defineComponent({
  components: {},
  props: {
    plotList: Array,
    farmList: Array,
  },
  setup(props, { emit }) {
    let titleGet = 222;
    let dialogVisible = ref(true);
    let playr = ref(null);
    let videoId=ref('')
    
    // 生命周期
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });

    //method
    function init(videoConfig) {
      let that = this;
      console.log("videoConfig", videoConfig);
      //let videoConfig = videoConfig;
      videoId.value = "video-container";
      setTimeout(() => {
        let width = this.$el.querySelector("#" + videoId.value).offsetWidth;
        let height = this.$el.querySelector("#" + videoId.value).offsetHeight;
        let url = this.videoConfig.url;
        let themeData = JSON.parse(JSON.stringify(previewThemeData));
        let options = {
          id: "video-container",
          accessToken: videoConfig.accessToken,
          url: url,
          width: width,
          height: height,

          audio: 0,
          autoplay: false,

          themeData: themeData,
          handleSuccess: () => {
            // setTimeout(() => {
            //   this.player.enableZoom();
            // }, 1000);
          },
         // poster: this.baseUrl + this.nowimg,
        };
        // if (this.isReview) {
        //   themeData = JSON.parse(JSON.stringify(reviewThemeData));
        //   url = url.replace(".hd", "");
        //   url = url.replace("live", "rec");
        //   let channelNo = this.videoConfig.channelNo;
        //   let begin = storeModel.videoReviewDate.begin;
        //   let end = storeModel.videoReviewDate.end;
        //   // console.log(begin,end);
        //   url = `${url}?begin=${begin}&end=${end}`;
        //   Object.assign(options, {
        //     url: url,
        //     channelNo: channelNo,
        //     // bgein:begin,
        //     // end:end,
        //     template: "theme",
        //     themeData: themeData,
        //   });
        //   // delete options.themeData;
        // }
        console.log("flag:", options);
        playr = new EZUIKit.EZUIKitPlayer(options);
      }, 200);
    }
    // return
    return {
      playr,
      init,
      titleGet,
      dialogVisible,
    };
  },
});
</script>
    
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
#video-container {
}
</style>
  
